<template>
  <el-drawer v-model="isShow" size="30%" title="完成统计" class="finish-drawer">
    <div class="select-tool flex">
      <ClassSelector
        v-model:currentClass="currentClass"
        :show-all="false"
        :isClassDefault="true"
        class="finish-selector"
      />
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :suffix-icon="Calendar"
      />
    </div>
    <el-empty v-if="!dataList.length"></el-empty>

    <ul class="finish-box" v-else>
      <li
        class="finish-item flex-between"
        v-for="(student, index) in dataList"
        :key="index"
      >
        <div class="item-left flex-column">
          <span class="font-weight">{{ student.student_name }}</span>
          <div class="left-info flex">
            <div>未完成：{{ student.un_submit_count }}个</div>
            <div>
              得分率：{{ Number(student.score_rate * 100).toFixed(0) }}%
            </div>
          </div>
        </div>
        <div class="item-right flex-column">
          <div class="font-weight">完成率</div>
          <div class="rate font-weight">
            {{ Number(student.complete_rate * 100).toFixed(0) }}%
          </div>
        </div>
      </li>
    </ul>
  </el-drawer>
</template>

<script setup>
import { defineModel, ref, watch } from 'vue'
import ClassSelector from './ClassSelector.vue'
import { Calendar } from '@element-plus/icons-vue'
import { getStudentCompleteStatistics } from '@/apis/assignment/index'
import { useAuthStore } from '@/stores'
import dayjs from 'dayjs'
import { debounce } from '@/utils/debounce.js'

const authStore = useAuthStore()
const dataList = ref([])
const currentClass = ref()
const dateRange = ref([])

const isShow = defineModel('isShow')

// 获取完成统计
const getStudentCompleteStatisticsInFo = async () => {
  const res = await getStudentCompleteStatistics({
    teacher_id: authStore.userInfo.userId,
    class_id: currentClass?.value[1],
    class_type: currentClass.value?.[1] ? currentClass.value?.[2] : null,
    subject_id: authStore.nowGlobalSubjectId,
    start_time: dateRange.value?.length
      ? dayjs(dateRange.value[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
      : '',
    end_time: dateRange.value?.length
      ? dayjs(dateRange.value[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      : ''
  })
  dataList.value = res.data || []
}

watch([() => currentClass.value, () => dateRange.value], () => {
  debounce(() => {
    getStudentCompleteStatisticsInFo()
  }, 500)
})
</script>

<!-- eslint-disable -->
<style lang="less">
.finish-drawer {
  .select-tool {
    padding: 0 30px;
    .finish-selector {
      margin-right: 20px;
    }
  }
  .finish-box {
    padding: 0 30px;
    margin-top: 20px;
    height: calc(100% - 80px);
    overflow-y: auto;
    .finish-item {
      height: 60px;
      margin-bottom: 25px;
      border-bottom: 1px solid rgba(230, 231, 232, 1);
      padding-bottom: 16px;
      .item-left {
        height: 100%;
        justify-content: space-between;
        .left-info {
          gap: 20px;
          color: rgba(4, 11, 26, 0.5);
        }
      }
      .item-right {
        height: 100%;
        justify-content: space-between;
        align-items: flex-end;
        .rate {
          color: rgba(66, 143, 255, 0.9);
          font-size: 20px;
        }
      }
    }
  }
  .el-drawer__header {
    font-weight: bold;
  }
  .el-drawer__body {
    padding: unset;
  }
}
</style>
